<template>
    <div>
        <el-dialog @opened="createEdit" :title="isedit ? '修改商品管理' : '添加商品管理'" :visible.sync="isshow" center
            :before-close="esc">
            <el-form :model="form" :rules="rules" ref="formName">
                <!-- 一级分类 -->
                <el-form-item label="一级分类" :label-width="formLabelWidth" prop="first_cateid">
                    <el-select @change="aaa" v-model="form.first_cateid" placeholder="请选择一级分类">
                        <el-option v-for="item in getlist" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <!-- 二级分类 -->
                <el-form-item label="二级分类" :label-width="formLabelWidth" prop="second_cateid">
                    <el-select v-model="form.second_cateid" placeholder="请选择二级分类">
                        <el-option v-for="item in cha" :key="item.id" :label="item.catename" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="商品名称" :label-width="formLabelWidth" prop="goodsname">
                    <el-input v-model="form.goodsname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格" :label-width="formLabelWidth" prop="price">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="市场价格" :label-width="formLabelWidth" prop="market_price">
                    <el-input v-model="form.market_price" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="图片" :label-width="formLabelWidth">
                    <el-upload :file-list="fileList" :auto-upload="false" action="#" list-type="picture-card"
                        :on-change="changeFile" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>

                <!-- 商品规格 -->
                <el-form-item label="商品规格" :label-width="formLabelWidth" prop="specsid">
                    <el-select @change="bbb" v-model="form.specsid" placeholder="请选择商品规格">
                        <el-option v-for="item in specslist" :key="item.id" :label="item.specsname" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!-- 规格属性 -->
                <el-form-item label="规格属性" :label-width="formLabelWidth" prop="specsattr">
                    <el-select v-model="form.specsattr" placeholder="请选择规格属性">
                        <el-option v-for="item in bbbc" :key="item" :label="item" :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="是否新品" :label-width="formLabelWidth" prop="type">
                    <el-radio-group v-model="form.isnew">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="是否热卖" :label-width="formLabelWidth" prop="type">
                    <el-radio-group v-model="form.ishot">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="商品描述" :label-width="formLabelWidth">
                    <div id="edit"></div>
                </el-form-item>


                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="esc">取 消</el-button>
                <el-button type="primary" @click="sure">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { goodsadd, goodsedit, goodsinfo } from '../../request/app'
//局部引入wangEditor
import wangEditor from 'wangeditor'
export default {
    props: ['isshow', 'isedit'],
    data() {
        return {
            gettype: 1,
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: [],
            // isshow:true,
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                first_cateid: '',//一级商品分类
                second_cateid: '',//二级分类编号
                goodsname: '',//商品名称
                price: '',//商品价格
                market_price: '',//市场价格 
                img: '',
                specsid: '',//商品规格编号
                specsattr: '',//商品规格属性
                isnew: 1,//是否新品     1-是 2-否
                ishot: 1,//是否热卖     1-是 2-否
                status: 1,//状态1正常2禁用
                description: '',//商品描述
            },
            rules: {
                first_cateid: [
                    { required: true, message: '请选择上级分类', trigger: 'change' },
                ],
                second_cateid: [
                    { required: true, message: '请选择二级分类', trigger: 'change' },
                ],
                specsid: [
                    { required: true, message: '请选择商品规格', trigger: 'change' },
                ],
                specsattr: [
                    { required: true, message: '请选择规格属性', trigger: 'change' },
                ],
                goodsname: [
                    { required: true, message: '请输入商品名称', trigger: 'blur' },
                ],
                price: [
                    { required: true, message: '请输入商品价格', trigger: 'blur' },
                ],
                market_price: [
                    { required: true, message: '请输入市场价格', trigger: 'blur' },
                ],
            },
            formLabelWidth: '120px',
            cha: [],
            bbbc: [],
            //设置一个编辑器的值
            edit: null

        };
    },
    computed: {
        ...mapGetters({
            getlist: 'toshop/getlist',
            specslist: 'tospecs/getlist',
        }),

    },
    mounted() {
        // console.log(this.$img);
        this.ACspecslist()
        this.ACsetlist()
    },
    methods: {
        //封装一个实例化富文本编辑器的方法
        createEdit() {
            console.log('打开弹框');
            //实例化插件
            this.edit = new wangEditor('#edit')
            //创建
            this.edit.create()
            //设置初始值
            this.edit.txt.html(this.form.description)
            console.log(this.edit, '编辑器');
        },
        ...mapActions({
            // ACsetlist: 'setmange/ACsetlist',
            // ACgetlistpeo:'setpeople/ACgetlistpeo'
            ACsetlist: 'toshop/ACsetlist',
            ACspecslist: 'tospecs/ACsetlist',
            ACgetlist: 'setgoods/ACgetlist',
            ACgetpage: 'setgoods/ACgetpage'
        }),
        // 关闭弹框
        esc() {
            // console.log(e);
            this.$emit('isshow', false)
            this.resize()
        },
        // 获取一级分类的id
        aaa(e) {
            this.cha = []
            this.getlist.map(item => {
                if (item.id == e) {
                    this.cha = item.children
                }
            }
            );
            // console.log(this.cha);
        },
        bbb(e) {
            // console.log(e);
            // console.log(this.specslist);
            this.specslist.map(item => {
                if (item.id == e) {
                    this.bbbc = item.attrs
                }
            })
            // console.log(this.bbb);
        },

        sure(e) {
            // console.log(e);
            // console.log(this.form);
            this.form.description = this.edit.txt.html()
            this.$refs.formName.validate((e) => {
                if (e) {
                    if (this.isedit) {
                        // 修改事件
                        // console.log(1111111111, 'edit');
                        goodsedit(this.form)
                            .then(res => {
                                // console.log(res);
                                this.esc()
                                this.ACgetlist()
                            })

                        console.log(this.getlist);

                    } else {
                        // 添加事件

                        goodsadd(this.form)
                            .then(res => {
                                // console.log(res);
                                this.esc()
                                this.ACgetpage()
                                this.ACgetlist()
                            })
                    }
                }
            })

        },
        // 重置
        resize() {
            this.form = {
                first_cateid: '',//一级商品分类
                second_cateid: '',//二级分类编号
                goodsname: '',//商品名称
                price: '',//商品价格
                market_price: '',//市场价格 
                img: '',
                specsid: '',//商品规格编号
                specsattr: '',//商品规格属性
                isnew: 1,//是否新品     1-是 2-否
                ishot: 1,//是否热卖     1-是 2-否
                status: 1,//状态1正常2禁用
                description: '',//商品描述
            },
                this.$refs.formName.resetFields();
            this.fileList = [],
                //当弹框关闭的时候，我们触发销毁
                this.edit.destroy()
        },
        // 修改的打开对话框
        lookup(id) {
            // 数据回显

            goodsinfo({
                id
            })
                .then(res => {
                    // console.log(res, '回显');
                    this.form = res.list
                    // console.log(this.form.first_cateid);
                    // console.log(this.getlist);
                    let a = this.getlist.findIndex(item => item.id == this.form.first_cateid)
                    // console.log(a);
                    this.cha = this.getlist[a].children

                    this.form.id = id
                    if (res.list.img != '') {
                        this.fileList = [{ url: 'http://localhost:3070' + res.list.img }]
                    }
                    // console.log(this.form,'回显');
                })
        },
        handleRemove(file, fileList) {
            // console.log(file, fileList);
            this.form.img = ''
            this.fileList = []
        },
        handlePictureCardPreview(file) {
            // console.log(file.url, 'urlllllllllllllllll');
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        changeFile(file, filelist) {
            // console.log(file, filelist, "change");
            this.form.img = file.raw;
            // console.log(this.form);
        },
    },
    components: {
    },
}
</script>

<style scoped>
</style>
